<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的bootstrap主页</title>

    <!-- Bootstrap -->
    <link href="../bootstrap_template/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap_template/css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- Icon -->
    <link rel="shortcut icon" href="favicon.png">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            padding-top: 70px;
        }
    </style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand " href="#" style="color: darkorange;background-color: #000000; border-radius: 50px">
                <span class="glyphicon glyphicon-record" style="color: deepskyblue"></span>
                我的主页
            </a>
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#"> 标签 </a></li>
                <li><a href="#"> 时间轴 </a></li>
                <li><a href="#"> 关于我们 </a></li>
                <li><a href="#"> 友情链接 </a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 账户 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人信息</a></li>
                        <li><a href="#">设 置</a></li>
                        <li class="divider"></li>
                        <li class="disabled"><a href="#">退 出</a></li>
                    </ul>
                </li>
                <form class="navbar-form pull-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="搜索 . . " autofocus="true">
                    </div>
                    <button type="submit" class="btn btn-default">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </form>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class='col-md-9'>
        <div id="sign-up" class='jumbotron'>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="inputEmail" class="col-sm-2 control-label">邮 箱</label>

                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label">密 码</label>

                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label">确认密码</label>

                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="rePassword" placeholder="Repassword">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 注册并登录
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">注 册</button>
                    </div>
                </div>
            </form>
        </div>
        <div id="p1" class='jumbotron'>
            <h2>道具的由来</h2>

            <p>
                　　小歌班初期的“砌末”(道具)，都是日常生活用具，后期及绍兴文戏时期，模仿京剧、绍剧道具，并由“检场”人(越剧称“值台师傅”)管理。所用道具都放在一大木箱(俗称“百宝箱”)里。这些道具是向“堂中行头”师傅租来的。以后，主要演员有了“私房行头”，道具中的桌围、椅帔也成了主要演员必备的“私彩”。</p>

            <p>
                　　当时，为与比较写实的布景吻合，以及表演上的需要，对舞台上常用的道具，如刀、枪、剑、棍、马鞭等，加以改良，达到美观、轻巧，适合女演员使用。而对另一些道具，就直接采用生活用品，或仿真制作。其时越剧界出现了兼职主管道具的演职人员，开始向“王生记”家具店租用红木家具，向电影厂租用道具，或去旧货店及豫园小商品摊档购买生活用品。特殊需要的道具，按图样到灯彩店去定做。道具制作师，采用翻模脱胎、篾扎纸糊、立粉彩绘、刻花裱托等工艺技法，制作出各式各样道具。</p>
        </div>
        <div id="p2" class='jumbotron'>
            <h2>戏曲中的道具</h2>

            <p>
                　　如《梁山伯与祝英台》中的酒杯、花瓶，形态逼真。《情探》中的龙王、神像,《北地王》中的先祖列宗，都用篾扎纸糊后彩绘，似庙里菩萨一般。《红楼梦》中的花篮、薰炉、立地花瓶等，都是既逼真又美观，令观者赏心悦目。越剧的道具，具有“轻”“巧”“美”“牢”的艺术特点，为戏曲界同行所称道，如明角灯，各地不少兄弟剧种剧团，曾派人到上海越剧院来学习过道具制作。</p>

            <p>　　1981年9月，上海越剧院演出的《凄凉辽宫月》中的道具(由技师李其实制作)，获首届上海戏剧节道具奖，首开道具获单项奖的先例。</p>
        </div>
        <div id="p3" class='jumbotron'>
            <h2>Foreign Language Article</h2>

            <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing
                banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl,
                echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim
                messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>

            <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua
                cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater
                food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic
                exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
        </div>
        <button id="more" class="btn btn-block btn-lg">更多 . . .</button>
    </div>
    <div class="col-md-3" id="myScrollspy">
        <div class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="10">
            <a class="list-group-item active">标题</a>
            <a href="#sign-up" class="list-group-item">注册新账号</a>
            <a href="#p1" class="list-group-item">道具的由来</a>
            <a href="#p2" class="list-group-item">戏曲中的道具</a>
            <a href="#p3" class="list-group-item">Foreign Language Article</a>
            <a href="#more" class="list-group-item">更多 . . .</a>
        </div>
        <div class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="10"
             style="margin: 497px auto auto auto">
            <a href="#" class="list-group-item"><span class="glyphicon glyphicon-chevron-up"
                                                      style="color: deepskyblue"></span></a>
        </div>
    </div>

</div>

<hr>
<div class="text-center">
    <div class="inner">
        <p>&copy; Copyright 2014 <a href="http://www.jimitec.com">JimiTec</a>, for <a
                href="http://www.codefordream.com">CodeForDream</a>.</p>
    </div>
</div>

<script src="../bootstrap_template/js/jquery.min.js"></script>
<script src="../bootstrap_template/js/bootstrap.min.js"></script>
</body>
</html>